<template>
  <div class="tableFile">
    <div class="file" v-if="files.length">
      <div>
        <div style="display: flex; align-items: center; padding: 10px">
          <div v-for="item in fileData" :key="item.url">
            <el-image
              v-if="item.type == 'jpg' || item.type == 'png'"
              style="width: 50px; height: 50px"
              :src="item.url"
              :preview-src-list="[item.url]"
            >
            </el-image>
            <div
              @click="goHref(item.url)"
              v-else
              style="font-size: 50px"
              :class="['iconfont', 'icon-' + item.type]"
            ></div>
          </div>
        </div>
      </div>

      <!-- <span
        :class="file.path ? 'cp' : ''"
        v-for="(file, index) in files"
        :key="index"
        @click="goHref(file)"
        :title="titleTip(file.path)"
      >
        {{ file }} -->

      <div></div>
    </div>
    <svg-icon v-else icon-class="File-Error" size="40" />
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "tableFile",
  data() {
    return {
      fileData: [],
      // baseUrl: global.baseurl,
    };
  },
  computed: {
    titleTip() {
      return (path) => {
        if (this.showTitle) {
          const pathArr = path.split("/");
          return pathArr[pathArr.length - 1];
        } else {
          return "文件";
        }
      };
    },
  },
  methods: {
    goHref(file) {
      if (file) {
        window.open(file);
      }
    },

    changeNameFile(name, downFileUrl, path) {
      if (!name) {
        this.goURL(downFileUrl);
        return;
      }

      axios
        .get(this.$baseUrl + "/api/download", {
          params: {
            path,
          },
          responseType: "blob",
        })
        .then((Blob) => {
          const url = URL.createObjectURL(Blob);
          const a = document.createElement("a");
          a.href = url;
          a.download = name + /.+(\.\w+)$/.exec(path)[1];
          a.click();
          URL.revokeObjectURL(url);
        });
    },

    goURL(downFileUrl) {
      /*  window.location.href = downFileUrl;
      window.location.target = "_blank"; */
    },
  },
  props: {
    /**
     * [{
     *  文件类型
     *  type: 'docx' || 'zip',
     *  文件路径
     *  path: ''
     * }]
     *
     */
    files: {
      type: Array,
      default: () => {
        return [];
      },
    },

    showTitle: {
      type: Boolean,
      default: false,
    },

    //修改下载文件名
    changeName: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    files: {
      handler(value, oldval) {
        let v = [];
        value.forEach((item) => {
          if (item) {
            if (!item.startsWith("http")) {
              v.push({
                url: this.$path + item,
                type: item.match(/\.(\w+)$/)[1],
              });
            } else {
              v.push({
                url: item,
                type: item.match(/\.(\w+)$/)[1],
              });
            }
            /*  item = item.replace(this.$baseUrl + "/storage/report/", "");
            v.push({ url: item, type: item.match(/\.(\w+)$/)[1] }); */
          }
        });
        this.fileData = v;
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped></style>
